<template>
  <div class="student-home">
    <asideView
      :activeId="activeId"
      :menuList="menuList"
      @change="handleChange"
    />
    <component :is="activeName" />
  </div>
</template>

<script setup>
import asideView from "@/views/student/aside.vue";
import courseContent from "@/views/student/courseContent.vue";
import personalCenter from "@/views/student/personalCenter.vue";

import { computed, ref } from "vue";
const menuList = [
  { label: "首页", icon: "home", id: "courseContent" },
  { label: "我的", icon: "my", id: "personalCenter" },
];
const activeId = ref(menuList[0].id);
const com = {
  courseContent: courseContent,
  personalCenter: personalCenter,
};
const activeName = computed(() => com[activeId.value]);

function handleChange(id) {
  activeId.value = id;
}
</script>

<style scoped lang="scss">
.student-home {
  display: flex;
  height: 100%;
  background-color: #e9e9e9;
}
</style>
